<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>『OPPO官网商城』OPPO最新款智能手机在线购买</title>
		<meta name="keywords" content="oppo手机官方"/>
		<meta name="description" content="这是我做的oppo商城"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="shortcut icon" href="./favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/carousel.css"/>
		<link rel="stylesheet" href="css/animate.css" />
	</head>
	<body>
		<div class="web">
		<header>	
			<div class="top">
				<div class="top_logo">
						<a href="">
							<img src="img/OPPO.png" alt="logo" />
						</a>
					</div>
					<ul class="nav">
						<li><a href="#">手机</a></li>
						<li><a href="#">品牌</a></li>
						<li><a href="#">商城</a></li>
						<li><a href="#">体验店</a></li>
						<li><a href="#">服务</a></li>
						<li><a href="#">社区</a></li>
						<li><a href="#">ColorOS</a></li>
						<li><a href="#">云服务</a></li>
					</ul>
					<div class="top_ico clearfix">
						<a href="javascript:void(0)" class="oh-navlink-bag oc-icon oc-iconfont-bag oc-iconfont-bag-bold"></a>
						<b class="oh-bag-arrow"></b>
				    </div>
				    <ul class="ico_xia">
							<li>
								<a href="shopcar.html">
									<b class="oc-icon oc-iconfont-cart oc-iconfont-cart-bold"></b>
									<span>购物车</span>
								</a>
							</li>
							<li>
								<a href="#">
									<b class="oc-icon oc-iconfont-order oc-iconfont-order-bold"></b>
									<span>我的订单</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<b class="oc-icon oc-iconfont-account oc-iconfont-account-bold"></b>
									<span>个人中心</span>
								</a>
							</li>
							<li>
								<a href="login.html">
									<b class="oc-icon oc-iconfont-user oc-iconfont-user-bold"></b>
									<span>登录</span>
								</a>
							</li>
						</ul>
				
				</div>
				<div class="nav_neirong clearfix">
					<ul>
						<li><a href="#">
							<img src="img/nav1.jpg" alt="" />
						</li></a>
						<li class="nav_xx"><a href="#">
							<img src="img/nav2.jpg" alt="" />
							<span>R11高配版</span></a>
						</li>
						<li class="nav_xx"><a href="#">
							<img src="img/nav3.jpg" alt="" />
							<span>A79</span></a>
						</li>
						<li class="nav_xx"><a href="#">
							<img src="img/nav4.jpg" alt="" />
							<span>A73</span></a>
						</li>
						<li class="nav_xx"><a href="#">
							<img src="img/nav5.jpg" alt="" />
							<span>A77</span></a>
						</li>
						<li class="nav_xx"><a href="#">
							<img src="img/nav6.jpg" alt="" />
							<span>A57</span></a>
						</li>
						<li class="nav_xx"><a href="#">
							<img src="img/nav7.jpg" alt="" />
							<span>A83</span></a>
						</li>
					</ul>
					
				</div>
			</header>
			<!--轮播图-->
			<div class="banner_box clear">
				<div class="carousel_wrap">
				<div class="lunbo_wrap">
					<!--轮播图的容器-->
					<ul class="pic_box">
						<li><img src="img/l-1.jpg" alt="" />
						    <div class="animated bounceInLeft">
						    	<h4>R11s</h4>
						    	<h2>方寸之间，浩瀚之美</h2>
						    	<a href="#">立即购买</a>
						    	<a href="#">探索产品</a>
						    </div>
						</li>
						<li><img src="img/l-2.jpg" alt="" /></li>
						<li><img src="img/l-3.jpg" alt="" /></li>
						<li><img src="img/l-4.jpg" alt="" /></li>
						<li><img src="img/l-5.png" alt="" /></li>
					</ul>
					<!--底部控制点-->
					<ul class="pannel">
					</ul>
				</div>
			</div>
				
			<!--<div class="banner">
				<div class="banner_tex">
					<h2>新年正当红 </h2>
					<p>R11s 星幕新年版上市 A83 抢先预约赢好礼进入活动</p>
					<a href="javascript:void(0)" target="_blank">进入活动</a>
				</div>
			</div>-->
			
			</div>
			<!--主推产品-->
			<div class="zt_one clearfix" data-scroll-reveal="enter from bottom over 1s">
				<div>
					<img src="img/zhutu1.jpg"/>
				</div>
				<div class="zt_one_wenzi">
					<ul>
						<li>
							<h3>R11s</h3>
							<p>方寸之间，浩瀚之美</p>
						</li>
					</ul>
					<ul class="yuandian">
						<li><span></span></li>
						<li><span></span></li>
						<li><span></span></li>
					</ul>
					<span>¥ 3199</span>
					<a href="javascript:void(0)" target="_blank">立即购买</a>
				</div>
			</div>
			<div class="zt_two"  data-scroll-reveal="enter from bottom over 1s">
				<div>
					<img src="img/zhutu2.jpg"/>
				</div>
				<div class="zt_two_wenzi">
					<ul>
						<li>
							<h3>R11s Plus</h3>
							<p>全面屏拍照手机</p>
						</li>
					</ul>
					<ul class="yuandian2">
						<li><span></span></li>
						<li><span></span></li>
					</ul>
					<span>¥ 3699</span>
					<a href="javascript:void(0)" target="_blank">立即购买</a>
				</div>
			</div>
			<!--产品图-->
			<div class="chanpin">
				<section class="chanpin_xx you"  data-scroll-reveal="enter from bottom over 1s">
				    <a href="product.html" >
					<div class="chanpin_photo"><img src="img/chanpin.jpg" alt="" /></div>
					<ul class="color-li">
						<li>
							<span></span>
						</li>
					</ul>
					<div class="zzz">
						<h3>R11s高配版 </h3>
						<p>6G运存 +128G内存</p>
						<span>¥ 3599</span>
					</div>
					</a>
				</section>
				<section class="chanpin_xx " data-scroll-reveal="enter from bottom over 1s">
				    <a href="javascript:void(0)" >
					<div class="chanpin_photo"><img src="img/chanpin2.jpg" alt="" /></div>
					<ul class="color-li">
						<li><span></span></li>
						<li><span></span></li>
					</ul>
					<div class="zzz">
						<h3>A73 </h3>
						<p>更清晰的全面屏手机</p>
						<span>¥ 1699</span>
					</div>
					</a>
				</section>
				<section class="chanpin_xx you" data-scroll-reveal="enter from bottom over 1s">
				    <a href="javascript:void(0)" >
					<div class="chanpin_photo"><img src="img/chanpin3.jpg" alt="" /></div>
					<ul class="color-li">
						<li><span></span></li>
						<li><span></span></li>
						<li><span></span></li>
					</ul>
					<div class="zzz">
						<h3>A79 </h3>
						<p>充电更快的全面屏手机</p>
						<span>¥ 2499</span>
					</div>
					</a>
				</section>
				<section class="chanpin_xx" data-scroll-reveal="enter from bottom over 1s">
				    <a href="javascript:void(0)" >
					<div class="chanpin_photo"><img src="img/chanpin4.jpg" alt="" /></div>
					<ul class="color-li">
						<li><span></span></li>
						<li><span></span></li>
						<li><span></span></li>
                    </ul>
					<div class="zzz">
						<h3>A77 </h3>
						<p>3GB+32GB</p>
						<span>¥ 1599</span>
					</div>
					</a>
				</section>
				<section class="chanpin_xx you" data-scroll-reveal="enter from bottom over 1s">
				    <a href="javascript:void(0)" >
					<div class="chanpin_photo"><img src="img/chanpin5.jpg" alt="" /></div>
					<ul class="color-li">
						<li><span></span></li>
						<li><span></span></li>
						<li><span></span></li>
					</ul>
					<div class="zzz">
						<h3>A57 </h3>
						<p>前置1600万像素</p>
						<span>¥ 1299</span>
					</div>
					</a>
				</section>
				<section class="chanpin_xx" data-scroll-reveal="enter from bottom over 1s">
				    <a href="javascript:void(0)" >
					<div class="chanpin_photo"><img src="img/chanpin6.jpg" alt="" /></div>
					<ul class="color-li">
						<li><span></span></li>
						<li><span></span></li>
					</ul>
					<div class="zzz">
						<h3>A37 </h3>
						<p>留住美一刻</p>
						<span>¥ 1199</span>
					</div>
					</a>
				</section>
			</div>
			<!--配件区-->
			<div class="peijian clearfix" data-scroll-reveal="enter from bottom over 1s">
				<div class="pj1 clearfix">
						<div class="pj1_tex">
							<h3>入耳式耳机</h3>
						    <p>¥ 59</p>
						</div>
						<div class="pj1_img">
							<img src="img/fenwai1.jpg" alt="" />
						</div>
				</div>
				<div class="pj2">
						<div class="pj2_img">
							<img src="img/pj2.jpg" alt="" />
						</div>
						<div class="pj2_tex">
							<h3>自拍杆樱花粉</h3>
						    <p>¥ 39</p>
						</div>
				</div>
				<div class="pj2">
						<div class="pj2_img">
							<img src="img/pj3.jpg" alt="" />
						</div>
						<div class="pj2_tex">
							<h3>自拍杆晴空蓝</h3>
						    <p>¥ 39</p>
						</div>
				</div>
				<div class="pj2">
						<div class="pj2_img">
							<img src="img/pj4.jpg" alt="" />
						</div>
						<div class="pj2_tex">
							<h3>闪充电源适配器</h3>
						    <p>¥ 79</p>
						</div>
				</div>
				<div class="pj2">
						<div class="pj2_img">
							<img src="img/pj5.jpg" alt="" />
						</div>
						<div class="pj2_tex">
							<h3>电源适配器</h3>
						    <p>¥ 19</p>
						</div>
				</div>
				<div class="pj2">
						<div class="pj2_img">
							<img src="img/pj6.jpg" alt="" />
						</div>
						<div class="pj2_tex">
							<h3>闪充USB数据线</h3>
						    <p>¥ 29</p>
						</div>
				</div>
				<div class="pj2">
						<div class="pj2_img">
							<img src="img/pj7.jpg" alt="" />
						</div>
						<div class="pj2_tex">
							<h3>USB数据线</h3>
						    <p>¥ 19</p>
						</div>
				</div>
			</div>
			<!--icon图标-->
			
			<footer>
				<div class="footer_box">
				<ul class="icc">
				<li>
					<i class="oc-icon oc-iconfont-guarantee"></i>
					<span>1 年全国联保</span>
				</li>
				<li>
					<i class="oc-icon oc-iconfont-return-goods"></i>
					<span>7 天退货保障</span>
				</li>
				<li>
					<i class="oc-icon oc-iconfont-exchange-goods"></i>
					<span>30 天换货保障</span>
				</li>
				<li>
					<i class="oc-icon oc-iconfont-delivery-light"></i>
					<span>全场包邮</span>
				</li>
				<li>
					<i class="oc-icon oc-iconfont-dot"></i>
					<span>555 家售后网点</span>
				</li>
				<li>
					<i class="oc-icon oc-iconfont-quality-goods"></i>
					<span>正品保障</span>
				</li>
			</ul>
			<div class="foot_mid">
				<div class="foot_le  clearfix">
					<dl>
						<dt>推荐机型</dt>
						<dd>
							<a href="javascript:void(0)">R11s</a>
							<a href="javascript:void(0)">A73</a>
							<a href="javascript:void(0)">A57</a>
							<a href="javascript:void(0)">A79</a>
						</dd>
					</dl>
					<dl>
						<dt>服务</dt>
						<dd>
							<a href="javascript:void(0)">服务网点查询</a>
							<a href="javascript:void(0)">零配件价格查询</a>
							<a href="javascript:void(0)">官方授权网点</a>
							<a href="javascript:void(0)">预置软件公示</a>
						</dd>
					</dl>
					<dl>
						<dt>关于我们</dt>
						<dd>
							<a href="javascript:void(0)">关于oppo</a>
							<a href="javascript:void(0)">加入我们</a>
						</dd>
					</dl>
					<dl>
						<dt>商务合作</dt>
						<dd>
							<a href="javascript:void(0)">开放平台</a>
							<a href="javascript:void(0)">采购相关</a>
						</dd>
					</dl>	
				</div>
				<div class="foot_ri ">
					<section>
						<a href="javascript:void(0)">
						<b class="oc-icon oc-iconfont-ooo"></b>	
						<span>在线客服</span>
					    </a>
					</section>
					<h3>4001-666-888</h3>
	                <p>24小时全国热线</p>        
				</div>
			</div>
				<div class="foot_bot clear">
					 <div class="bot_le">
					 	© 2005 - 2017 OPPO 版权所有 <a href="">粤ICP备14056724号-2</a>联系方式：4001-666-888
					    <a href="javascript:void(0)" class="ico"><img src="img/icon-gs1.png" alt="" /></a>
					 </div>
					 <div class="bot_ri">
					 	<span>关注我们：</span>
					 	<a href="javascript:void(0)" class="oc-icon oc-iconfont-weibo"></a>
					 	<a href="javascript:void(0)" class="oc-icon oc-iconfont-weixin"></a>
					 	<a href="javascript:void(0)" class="oc-icon oc-iconfont-alipay"></a>
					 	<i></i>
					 	<a href="" class="oc-icon oc-iconfont-global"><span>Global</span></a>
					 	
					 </div>
				</div>
				<div class="clear"></div>
				</div>

			
			
			
		</div>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/scrollReveal.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/jquery-1.11.0.js"></script>
	     <script src="js/carousel.js"></script>
	     <script>
	     	new lunbo(".carousel_wrap",512/1300,true,true,1000,true);

	     </script>
	</body>
</html>
